// eslint-disable-next-line @typescript-eslint/no-unused-vars
import * as RMWC from '@rmwc/types';
import React from 'react';
import { Icon, IconProps } from '@rmwc/icon';
import {
  useClassNames,
  Tag,
  createComponent,
  createMemoComponent
} from '@rmwc/base';

/** Grid List Component */
export interface GridListProps {
  /** Use a 1px gutter. */
  tileGutter1?: boolean;
  /** Move the caption to the top of the card. */
  headerCaption?: boolean;
  /** Make the caption two lines. */
  twolineCaption?: boolean;
  /** Leaves space for a start aligned icon. */
  withIconAlignStart?: boolean;
  /** One of the following values: 1x1, 16x9, 2x3, 3x2, 4x3, 3x4. */
  tileAspect?: '1x1' | '16x9' | '2x3' | '3x2' | '4x3' | '3x4';
}

/** Grid List Component */
export const GridList = createComponent<GridListProps>(
  function GridList(props, ref) {
    const {
      tileGutter1,
      headerCaption,
      twolineCaption,
      withIconAlignStart,
      tileAspect = '1x1',
      children,
      ...rest
    } = props;

    const className = useClassNames(props, [
      'mdc-grid-list',
      {
        'mdc-grid-list--tile-gutter-1': tileGutter1,
        'mdc-grid-list--header-caption': headerCaption,
        'mdc-grid-list--twoline-caption': twolineCaption,
        'mdc-grid-list--with-icon-align-start': withIconAlignStart,
        [`mdc-grid-list--tile-aspect-${tileAspect || ''}`]: tileAspect
      }
    ]);

    return (
      <Tag {...rest} ref={ref} className={className}>
        <ul className="mdc-grid-list__tiles">{children}</ul>
      </Tag>
    );
  }
);

/** The primary content for a Grid tile */
export interface GridTilePrimaryProps {}

/** The primary content for a Grid tile */
export const GridTilePrimary = createComponent<GridTilePrimaryProps>(
  function GridTilePrimary(props, ref) {
    const className = useClassNames(props, ['mdc-grid-tile__primary']);
    return <Tag {...props} ref={ref} className={className} />;
  }
);

/** The inner primary content for a Grid tile */
export interface GridTilePrimaryContentProps {}

/** The inner primary content for a Grid tile */
export const GridTilePrimaryContent =
  createComponent<GridTilePrimaryContentProps>(
    function GridTilePrimaryContent(props, ref) {
      const className = useClassNames(props, [
        'mdc-grid-tile__primary-content'
      ]);
      return <Tag tag="img" {...props} ref={ref} className={className} />;
    }
  );

/** A grid tile */
export interface GridTileProps {}

/** A grid tile */
export const GridTile = createComponent<GridTileProps>(
  function GridTile(props, ref) {
    const className = useClassNames(props, ['mdc-grid-tile']);
    return <Tag tag="li" {...props} ref={ref} className={className} />;
  }
);

/** The secondary content for a Grid tile */
export interface GridTileSecondaryProps {}

/** The secondary content for a Grid tile */
export const GridTileSecondary = createComponent<GridTileSecondaryProps>(
  function GridTileSecondary(props, ref) {
    const className = useClassNames(props, ['mdc-grid-tile__secondary']);
    return <Tag tag="span" {...props} ref={ref} className={className} />;
  }
);

/** The icon for a Grid tile. This is an instance of Icon component. */
export interface GridTileIconProps extends IconProps {}

/** The icon for a Grid tile. This is an instance of Icon component. */
export const GridTileIcon = createMemoComponent<GridTileIconProps>(
  function GridTileIcon(props, ref) {
    const className = useClassNames(props, ['mdc-grid-tile__icon']);
    return <Icon {...props} ref={ref} className={className} />;
  }
);

/** The title for a Grid tile */
export interface GridTileTitleProps {}

/** The title for a Grid tile */
export const GridTileTitle = createComponent<GridTileTitleProps>(
  function GridTileTitle(props, ref) {
    const className = useClassNames(props, ['mdc-grid-tile__title']);
    return <Tag tag="span" {...props} ref={ref} className={className} />;
  }
);

/** Supporting Text for the Grid Tile */
export interface GridTileTitleSupportTextProps {}

/** Supporting Text for the Grid Tile */
export const GridTileTitleSupportText =
  createComponent<GridTileTitleSupportTextProps>(
    function GridTileTitleSupportText(props, ref) {
      const className = useClassNames(props, ['mdc-grid-tile__support-text']);
      return <Tag tag="span" {...props} ref={ref} className={className} />;
    }
  );
